<template>
  <div class="ProvincialSlopeInformation">
    <ul class="province">
      <li class="province__total">
        <img src="/static/img/slope/slopeTotal.png" />
        <span class="province__total__number">100个</span>
      </li>
      <li class="province__area">
        <img src="/static/img/slope/slopeArea.png" />
        <span class="province__area__text">边坡监测面积</span>
        <span class="province__area__number">100km²</span>
      </li>
    </ul>
    <p class="province-list-text">边坡各地列表</p>
    <div class="province-list">
      <chart-view
        :chart-option="provincialSlopeInformationOption"
        :auto-resize="true"
        height="100%"
      />
    </div>
  </div>
</template>
<script>
import { provincialSlopeInformationData } from "../../../temp/data";
export default {
  name: "ProvincialSlopeInformation",
  data() {
    return {
      provincialSlopeInformation: [],
      provincialSlopeInformationOption: {},
    };
  },
  created() {
    this.provincialSlopeInformation = provincialSlopeInformationData();
    this.provincialSlopeInformationOption = this.$eChartFn.levelBar(
      this.provincialSlopeInformation
    );
  },
  methods: {},
};
</script>
<style scoped lang='less'>
.ProvincialSlopeInformation {
  height: 100%;
  width: 100%;
}

.province {
  display: flex;
  justify-content: space-between;
  height: 20%;
  width: 100%;

  &__area {
    &__text {
      padding: 0.5vw;
      font-size: 1.125rem;
      color: #eee;
    }
  }

  &__total__number,
  &__area__number {
    font-size: 1.125rem;
    font-weight: 500;
    color: #f7aa65;
  }
}

.province-list-text {
  height: 10%;
  font-size: 1.125rem;
  color: #eee;
}

.province-list {
  width: 100%;
  height: 70%;
  // background: aqua;
}
</style>
